<template>
  <div>
    <!--   贷款App-->
    <div style="padding: 10px" v-show="permiss['/approveDetails/loanAppCount']">
      <el-button type="text">{{ $t('贷款类APP数量') }}: {{ loanAppNum }}{{ $t('个') }}</el-button>
    </div>
    <Table :table-data="tableData" border
           max-height="400px"
           style="margin-bottom: 10px"
           @handleSizeChange="handleSizeChange"
           @handleCurrentChange="handleCurrentChange"
           :headerStyle="{backgroundColor:'#fffbed'}"
           :page="page"
           :tableColumn="tableColumn">
      <el-table-column :label="$t('APP名称')" prop="appName" align="center"></el-table-column>
      <el-table-column :label="$t('是否贷款APP')" prop="isLoanApp" align="center">
        <template slot-scope="{row}">
        <span style="font-size: 14px"
              :style="{color:row.isLoanApp === 1 ? '#f51458' : ''}">{{ row.isLoanApp === 1 ? $t('是') : $t('否') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('安装时间')" prop="firstInstallTime" align="center"></el-table-column>
    </Table>
  </div>
</template>

<script>
import {loanApp, loanAppCount} from "@/api/order";

export default {
  props: ['childPermiss','routesQuery'],
  data() {
    return {
      tableData: [],
      tableColumn: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      loanAppNum: 0,
      permiss: {}
    }
  },
  mounted() {
    const obj = {}
    // 下级权限
    if (this.childPermiss && this.childPermiss.length !== 0) {
      for (let i = 0; i < this.childPermiss.length; i++) {
        obj[this.childPermiss[i].url] = this.childPermiss[i].url
      }
      this.permiss = obj
    }
    if (this.permiss['/approveDetails/loanApp']) {
      this.getList()
    }
    if (this.permiss['/approveDetails/loanAppCount']) {
      this.getLoanAppNum()
    }
  },
  methods: {
    async getList() {
      const {userId, orderId} = this.routesQuery
      const res = await loanApp({
        userId: parseInt(userId),
        loanRecordId: orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page.total = total
      }
    },
    async getLoanAppNum() {
      const {userId, orderId} = this.routesQuery
      const res = await loanAppCount({
        userId: parseInt(userId),
        loanRecordId: orderId,
      })
      this.loanAppNum = res.data
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
